/**
 * @description 存款持仓
 * @author wangjianjun
 */

import { Form } from '@ant-design/compatible';

import '@ant-design/compatible/assets/index.css';

import { Row, Col } from 'antd';
import { connect } from 'dva';
import _ from 'lodash';
import React, { PureComponent } from 'react';

import { TableC, ExportC } from '../../../../comps';
import config from '../../../../comps/business/tradingMarket/config';
import { findValueByCode } from '../../../../utils/utils';
import SetColumns from '../common/SetColumns';

@Form.create()
@connect(({ tansactionRecordquiryM, loading, globalM }) => ({
  tansactionRecordquiryM,
  loading: loading.effects['tansactionRecordquiryM/queryFnd'],
  globalM,
}))
export default class DepositMoney extends PureComponent {
  constructor(props) {
    super(props);
    this.scrollx = 0;
    this.newColumns = [];
    this.state = {
      search: {},
      columns: [],
      dataSource: [],
      page: 1,
      pageSize: 20,
      total: 0,
      account: {},
      treeData: [],
      checkedKeys: [],
      scrollx: 0,
    };
  }

  componentDidMount() {
    const { dispatch, args } = this.props;
    // 债券默认查表头信息
    dispatch({
      type: 'tansactionRecordquiryM/queryShowCol',
      payload: {
        type: 'DEPOSIT_FLOW',
      },
      callback: () => {},
    });
    this.setState(
      {
        search: args,
      },
      () => {
        this.getTableData();
      },
    );
  }

  // eslint-disable-next-line react/no-deprecated
  UNSAFE_componentWillReceiveProps(nextProps) {
    const init = !this.props.args ? '' : JSON.stringify(this.props.args);
    const initN = !nextProps.args ? '' : JSON.stringify(nextProps.args);

    if (init != initN) {
      this.setState(
        {
          search: nextProps.args,
        },
        () => {
          this.getTableData();
        },
      );
    }
  }

  // 分页切换
  handleTableChange = (pagination) => {
    const { current, pageSize } = pagination;
    this.setState(
      {
        page: current,
        pageSize,
      },
      () => {
        this.getTableData('pageChange');
      },
    );
  };

  // 查询表格数据
  getTableData = (type) => {
    const { dispatch } = this.props;
    const { page, pageSize, search } = this.state;
    const params = {};
    params.pageSize = pageSize;
    if (type != 'pageChange') {
      // 点击查询按钮 重置页码
      this.setState({
        page: 1,
      });
      params.page = 1;
    } else {
      // 点击页码切换时候调用
      params.page = page;
    }
    // 列表数据
    dispatch({
      type: 'tansactionRecordquiryM/queryFnd',
      payload: {
        ...params,
        ...search,
        type: '3',
      },
      callback: (res) => {
        res.data &&
          res.data.map((item, key) => {
            item.key = key;
          });
        this.setState({
          dataSource: res.data,
          total: res.total,
        });
      },
    });
  };

  // 导出参数调整
  changeSearch(type) {
    const { search } = this.state;
    const newSearch = _.cloneDeep(search);
    if (newSearch && newSearch.cpCode) {
      newSearch.cpCode = newSearch.cpCode.join(',');
    }
    newSearch.type = type;
    return newSearch;
  }

  render() {
    const {
      tansactionRecordquiryM: { columnsInfo, checkedKeysInfo },
      loading,
    } = this.props;
    const {
      globalM: {
        dataDictionary: { CKLX = [] },
      },
    } = this.props;
    const columns = _.cloneDeep(columnsInfo[4].columns);
    this.newColumns = columns.filter((item) => item.display == true);
    if (this.newColumns && this.newColumns.length > 10) {
      const a = this.newColumns.length;
      this.scrollx = a * 150;
    } else {
      this.scrollx = 0;
    }

    this.newColumns.map((item) => {
      if (item.key == 'depositPeriod') {
        item.render = (text) => findValueByCode(text, CKLX); // 字典翻译 存款类型
      }
      if (item.key === 'settleMoney') {
        item.type = 'money';
        item.toFixed = '2';
      }
      if (item.key == 'llimitTime' || item.key == 'enInterest' || item.key == 'enFeeRatio') {
        item.align = 'right';
      }

      if (item.key == 'tradeBalance' || item.key == 'fee') {
        item.type = 'money';
      }

      if (item.key == 'lbeginDate' || item.key == 'lendDate') {
        item.render = (text) => {
          if (text != '--' && text) {
            const newText = text.toString();
            return `${newText.slice(0, 4)}-${newText.slice(4, 6)}-${newText.slice(6)}`;
          }
          return '--';
        };
      }

      if (item.key == 'jysc') {
        item.render = (text, record) => {
          if (record?.exchangecode) {
            // eslint-disable-next-line no-shadow
            const findvalue = config.filter((item) => item.value == record.exchangecode);
            if (findvalue && findvalue.length > 0) {
              return findvalue[0].title;
            }
            return '--';
          }
          return '--';
        };
      }
    });

    return (
      <div>
        <Row>
          <Col span={18} />
          <Col span={6} style={{ marginBottom: '10px' }}>
            <div style={{ width: `${(22 / 24) * 100}%`, display: 'flex', flexDirection: 'row-reverse' }}>
              <SetColumns type='4' parameter='DEPOSIT_FLOW' checkedKeysInfo={checkedKeysInfo} />
              <ExportC style={{ marginTop: '10px' }} url='api/v1/transactionLs/exprotJnl' search={this.changeSearch('3')} />
            </div>
          </Col>
        </Row>
        <TableC
          columns={this.newColumns || []}
          dataSource={this.state.dataSource || []}
          onChange={this.handleTableChange}
          current={this.state.page}
          pageSize={this.state.pageSize}
          total={this.state.total}
          selfScrollY
          scroll={{ x: this.scrollx }}
          loading={loading}
          rowKey='key'
        />
      </div>
    );
  }
}
